<template>
    <teleport to="body" v-if="show">
        <div class="rock-mask">
            <div class="rocks">
                <img src="@/assets/rock.svg" class="rock-img" />
                <div class="tis">
                    <img src="@/assets/alpha1.svg" class="alp" />
                    <div class="tip">{{ $t('message.rock.a') }}</div>
                </div>
                <div class="well">
                    {{ tip }}
                </div>
                <JButton :label="$t('message.rock.c')" class="jb" @click="onHide"></JButton>
            </div>
        </div>

    </teleport>
</template>

<script lang="ts" setup>
import JButton from "@/components/j-button/index.vue"
import { useAccount } from "@/stores/account";
import { useUser } from "@/stores/user";
import { computed, onMounted, ref } from "vue";
import i18n from "@/locals";
import { useLayout } from "@/stores/layout";
const show = ref(false);
const account = useAccount();
const user = useUser();
const layout = useLayout()

const tip = computed(() => {
    return i18n.global.t('message.rock.b').replace("@", user.registerEnergyMax + "")
})

onMounted(() => {
    // if(user.isLogin){
    user.getRegisterEnergyMax();
    // }
    setTimeout(() => {
        if (localStorage.getItem("news") == "1") {
            show.value = false;
        }
        else {
            if(layout.isMobile == false){
                show.value = true;
            }
            
        }
    }, 2000);
});

const onHide = () => {
    show.value = false;
    localStorage.setItem("news", "1");
    account.changePopRegister(true)
}

</script>

<style lang="less" scoped>
@import url("./index.less");
</style>